<script setup lang="ts">
import { apiShop, apiShopAdd, apiShopEdit, apiShopInfo } from "@/apis/shop";
import { toast } from "@climblee/uv-ui/libs/function";
import { onLoad } from "@dcloudio/uni-app";
import { reactive, ref } from "vue";
import { apiGradeList } from "@/apis/user";
import { onShow } from "@dcloudio/uni-app";
import { apiComfirmOrder, wxPayMiniAppPay } from '@/apis/order';
const navbarFixed = ref(false);
const appCommodityId = ref([])
const goodsWaterfallMyRef = ref()
const shoppingId = ref()
const num = ref()
const price = ref()
const radioCustomStyle = { "align-items": "normal" };
const formData = reactive({
  id: null, // 详情接口返回的商品ID 新用户开通店铺时 不传id
  type: null,
  shopName: "", //商铺名称
  shopIllustrate: "", //主要经营业务
  shopGrade: 0, //商铺开通等级
  shopGradeId: 0, //等级下标
});
const oldData = reactive({
  shopGradeId: 0,
});
let gradeList = ref([]); //会员列表
let userId = ref({});
const isOpen = ref("not"); // 未开通 not 已开通 has
const is = ref("edit"); // edit 修改 up 升级
// 支付接口 start
const comfirmOrder = async () => {
  let params = {
    commodityId: null, //商品ID
    commodityName: null, //商品的标题名称
    actualPayment: null, //支付价格
    userAddressId: null, //发货地址ID
    type: 1, //消费类型  0-开会员  1-开商铺  2-购买商品  3-藏品认证  4-评价费用
    activitiesId: null, //评选活动Id
    appCommodityList: null, // 4评价活动的时候传
    collectionCertificationList: null, // 3藏品认证的时候传
    appShop: formData
  };
  // let res = await apiComfirmOrder(params);
  // if (res.code == 200) {
  //     shoppingId.value = res.data.shopingId
  //     num.value =res.data.num
  //     price.value =res.data.price
  //     wxPayMiniAppPayFn()
  // }
  await wxPayMiniAppPayFn(params)
}
const wxPayMiniAppPayFn = async (params: any) => {
  let res = await wxPayMiniAppPay(params)
  if (res.code == 200) {
    if (res.code == 200) {
      let dataObj = res.data;
      wx.openEmbeddedMiniProgram({
        appId: dataObj.appId,
        path: dataObj.path,
        envVersion: 'release',//正常跳转路径
        success(res) {
          uni.setStorageSync('isPaySuccess', true)
        }
      })
    }
  }
}
// 支付接口end
const handleClick = async () => {
  if (!formData.shopName) {
    return toast("请输入商铺名称");
  }

  if (!formData.shopIllustrate) {
    return toast("请输入主要经营业务");
  }

  if (!formData.shopGrade) {
    return toast("请选择店铺等级");
  }


  if (isOpen.value == "not") {
    // let res = await apiShopAdd(formData);
    // if (res.code == 200) {
    //   comfirmOrder()
    //   toast("提交成功");
    //   uni.navigateBack({ delta: 1 });
    // }
    //新增店铺type 1
    formData.type = 1
    comfirmOrder()
  }
  // if (isOpen.value == "has" && (is.value == "edit" || is.value == "up")) {
  //   if (formData.shopGradeId < oldData.shopGradeId) {
  //     return toast("会员暂不支持降级，如有疑问请联系客服解答");
  //   }
  //   let res = await apiShopEdit(formData);
  //   isOpen.value = "has";
  //   is.value = "edit";
  //   if (res.code == 200) {
  //     toast("提交成功");
  //     uni.navigateBack({ delta: 1 });
  //   }
  // }
  if (isOpen.value == "has" && is.value == "up") {
    if (formData.shopGradeId < oldData.shopGradeId) {
      return toast("会员暂不支持降级，如有疑问请联系客服解答");
    }
    //店铺升级 type 2
    formData.type = 2
    comfirmOrder()
  }
  if (isOpen.value == "has" && is.value == "edit") {
    let res = await apiShopEdit(formData);
    isOpen.value = "has";
    is.value = "edit";
    if (res.code == 200) {
      toast("提交成功");
      uni.navigateBack({ delta: 1 });
    }
  }
  userStore.editUSerDetail();
  // 修改成功后重新请求
  getShopDetail();
};
const handleShopUp = (e: any) => {

  if (e.id < oldData.shopGradeId) {
    return toast("会员暂不支持降级，如有疑问请联系客服解答");
  }

  if (e.id > formData.shopGradeId) {
    is.value = "up";
  } else if (e.id === oldData.shopGradeId) {
    is.value = "edit";
  }
  formData.shopGrade = e.name;
  formData.shopGradeId = e.id;
  // formData.id = e.id;
  formData.type = e.type;

  // toast('点击了提交按钮');
};
const getShopDetail = async () => {
  let params = {
    appUserId: userId.value,
  };
  let res = await apiShop();
  if (!res.data) {

    isOpen.value = "not";
  } else {

    Object.assign(formData, res.data);
    Object.assign(oldData, res.data);
    formData.id = res.data.id // 店铺id
    isOpen.value = "has";
  }
};

// 会员
const getFGradeList = async () => {
  let res = await apiGradeList();
  if (res.data && res.data.length > 0) {
    gradeList.value = [];
    res.data.forEach((item: any) => {
      if (item.type == 1) {
        gradeList.value.push(item);
      }
    });
  }
};
onShow(() => {
  getShopDetail();
});
onLoad((options: any) => {
  userId.value = JSON.parse(uni.getStorageSync("user")).userInfo.id;

  getFGradeList();
});
</script>
<template>
  <navbar title="申请开店" :fixed="navbarFixed" />
  <view class="container">
    <view class="shopname-text">店铺名称</view>
    <view class="shopname-bg">
      <view class="flex">
        <!-- <text class="margin-right-20">店铺名:</text> -->
        <input type="text" v-model="formData.shopName" placeholder="请输入店铺名" :maxlength="10" />
      </view>
    </view>
    <view class="shopname-text">主营业务</view>
    <view class="shopname-bg">
      <view class="flex">
        <input type="text" v-model="formData.shopIllustrate" placeholder="请输入主营业务" />
      </view>
    </view>
    <view class="radio-wrap">
      <radio-group>
        <view class="l-card store" v-for="(item, index) in gradeList" :key="index" @click="handleShopUp(item)">
          <view class="flex shopitem" v-if="item.type == 1">
            <!-- <view class="radio-wraps">
              <radio
                color="#C33E29"
                style="transform: scale(0.8)"
                :checked="formData.shopGradeId == item.id ? true : false"
                :customStyle="radioCustomStyle"
              ></radio>
            </view> -->
            <view class="info-text">
              <view class="name-top">
                <view class="img">
                  <image src="@/static/images/shopicons.png"></image>
                </view>
                <view class="title">{{ item.name }}</view>
              </view>
              <view class="price-wrap">
                <view class="pricenum">
                  <text class="yjin">开店押金：</text>
                  <text class="pricenum-col">¥{{ item.price }}</text>
                  <text class="yjin year">元</text>
                </view>
                <view class="deposit-wrap">
                  <text class="yjin">开店会费：</text>
                  <text class="pricenum-col">¥{{ item.deposit }}</text>
                  <text class="yjin year">元/年</text>
                </view>
              </view>
              <uv-line></uv-line>
              <view class="check-item">
                <view class="fb-num">上架商品数：{{ item.num }}</view>
                <view class="radio-wraps">
                  <radio color="#C33E29" style="transform: scale(0.8)"
                    :checked="formData.shopGradeId == item.id ? true : false" :customStyle="radioCustomStyle"></radio>
                </view>
              </view>
              <!-- <text class="grade">{{ item.name }}</text>
              <view class="flex"
                >开店押金：<view class="price flex flex-align-center">
                  <view class="price-icon">￥</view>{{ item.price }}
                </view>
              </view>
              <view class="flex"
                >开店会费：<view class="price flex flex-align-center">
                  <view class="price-icon">￥</view>{{ item.deposit }}
                </view>
              </view>
              <view class="flex">上架商品数 {{ item.num }} </view> -->
            </view>
          </view>
        </view>
      </radio-group>
    </view>
    <view class="btn-box flex">
      <!-- <view class="coupon-select">
        <view class="couppn-lft">
          <view class="couppn-img">
            <image src="@/static/images/couppnicon.png" class="bg-box"/>
          </view>
          <view class="coupon-title">优惠券</view>
        </view>
        <view class="coupon-rht">
          <view class="coupon-money">-¥{{10}}</view>
          <view>
            <uv-icon name="arrow-right" size="12"></uv-icon>
          </view>
        </view>
      </view>
      <view class="vip-btn">
        <view class="kt-lft">
          <view class="kt-lft-money">
            <text class="fh">¥</text>
            <text class="num-money">
              {{parseFloat((0.1-0.01)).toFixed(2)}}
            </text>
          </view>
          <view class="yhq">优惠券已抵扣 10元</view>
        </view>
        <view class="kt-rit">开通会员</view>
      </view> -->
      <button class="btn" @click="handleClick" v-if="isOpen == 'not'">
        缴费并开店
      </button>
      <button class="btn" @click="handleClick" v-if="isOpen == 'has' && is == 'up'">
        升级店铺
      </button>
      <button class="btn" @click="handleClick" v-if="is == 'edit' && isOpen == 'has'">
        保存修改
      </button>
    </view>
  </view>
</template>
<style lang="scss">
::v-deep .uv-line {
  margin: 10px 0 !important;
}

.container {
  // padding: 20rpx 0 0 0;
  padding: 40rpx 0 0 0;
  // background: url("https://www.stoneplayer.com/background/underlay.jpg") no-repeat;
  background: url("https://leshi-oss.oss-cn-qingdao.aliyuncs.com/a5207c43-a7ac-4457-a04f-4df4dc973c9e.png") no-repeat;
  background-size: 100% 310px;
  height: calc(100vh - 320rpx);
  overflow-y: scroll;
  overflow-x: hidden;
}

.l-card {
  border-radius: 20rpx;
}

.store {
  margin-top: 30rpx;
}

.btn-box {
  width: 100%;
  padding: 80rpx 30rpx 40rpx;

  .btn {
    background: #C7452F;
    border-radius: 50rpx;
    width: 650rpx;
    height: 100rpx;
  }
}

.price {
  color: #f3604e;
  font-weight: 600;
}

.price-icon {
  font-size: 24rpx;
}

.info {
  font-size: 28rpx;
  font-weight: 500;

  .grade {
    font-weight: 700;
    font-size: 32rpx;
    color: #000000;
  }
}

.radio-wrap {
  background: #ECECEC;
  border-radius: 24rpx 24rpx 0rpx 0rpx;
  padding: 10rpx 20rpx;
  margin-top: 40rpx;
}

.shopname-bg {
  background: rgba(255, 255, 255, 0.5);
  border-radius: 16rpx;
  color: #fff;
  margin: 21rpx 20rpx 26rpx 20rpx;
  padding: 20rpx 30rpx;
  font-weight: 400;
  font-size: 32rpx;
}

.shopname-text {
  font-weight: 600;
  font-size: 34rpx;
  color: #FFFFFF;
  margin-left: 20rpx;
}

.shopitem {
  position: relative;
}

.name-top {
  display: flex;
  align-items: center;

  .img {
    width: 36rpx;
    height: 36rpx;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .title {
    font-weight: 500;
    font-size: 30rpx;
    color: #000000;
    margin-left: 10rpx;
  }
}

.price-wrap {
  display: flex;
  align-items: center;
  margin-top: 18rpx;
  margin-bottom: 30rpx;
}

.deposit-wrap {
  margin-left: 40rpx;
}

.year {
  margin-left: 10rpx;
}

.pricenum-col {
  color: #C33F29;
  font-size: 24rpx;
  font-weight: bold;
}

.yjin {
  font-size: 24rpx;
  font-weight: bold;
}

.info-text {
  width: 100%;
}

.check-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 30rpx;

  .fb-num {
    font-weight: normal;
    font-size: 24rpx;
    color: #8B8B8B;
  }
}


.vip-btn {
  width: 100%;
  font-weight: 500;
  font-size: 32rpx;
  color: #FFFFFF;
  background: linear-gradient(101deg, #333333 0%, #010101 100%);
  box-shadow: 0rpx 6rpx 15rpx 0rpx rgba(0, 0, 0, 0.5);
  border-radius: 50rpx;
  text-align: center;
  display: flex;

  .kt-lft {
    flex: 1;
    padding: 14rpx 0 14rpx 50rpx;
    text-align: left;

    .kt-lft-money {
      .fh {
        font-size: 30rpx;
      }

      .num-money {
        font-size: 40rpx;
      }
    }

    .yhq {
      font-size: 20rpx;
    }
  }

  .kt-rit {
    width: 258rpx;
    background: linear-gradient(101deg, #FF5033 0%, #E43011 100%);
    border-top-right-radius: 50rpx;
    border-bottom-right-radius: 50rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 32rpx;
  }
}

.coupon-select {
  background: #FFF3F1;
  border-radius: 16rpx;
  padding: 28rpx 22rpx;
  // margin: 0rpx 60rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding-bottom: 80rpx;
  position: absolute;
  width: 92%;
  z-index: -1;
  bottom: 82rpx;
}

.couppn-img {
  width: 32rpx;
  height: 32rpx;

  image {
    width: 100%;
    height: 100%;
  }
}

.couppn-lft,
.coupon-rht {
  display: flex;
  align-items: center;
}

.coupon-title {
  margin-left: 16rpx;
  font-weight: bold;
  font-size: 24rpx;
  color: #000000;
}

.coupon-money {
  font-weight: bold;
  font-size: 24rpx;
  color: #E43012;
  margin-right: 8rpx;
}
</style>
